import { Button, Form, Input } from "antd";
import { useState } from "react";
import { verifycodeApi } from "../../../apis/login";
import { useNavigate } from "react-router-dom";

function ForgetPass() {
  type FieldType = {
    email?: string;
  };
  const navto = useNavigate();
  function to(url: string,value:any) {
    navto(url,{state:value});
  }
  let [Loading,setLoading] = useState<boolean>(false)
  const onFinish = (values: any) => {
    setLoading(true)
    verifycodeApi(values).then((res:any)=>{
      if(res.code === 200){
        let code = res.result.code
        to('/login/find_pass',{...values,code})
      }
      setLoading(false)
    })
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };
  
  return (
    <>
      <div className="logintitle">
        <img src="../../../../public/login/3.svg" alt="" />
        <span>忘记密码</span>
      </div>
      <Form
        layout="vertical"
        name="basic"
        style={{ width: "100%" }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item>
          <div
            style={{
              width: "100%",
              textAlign: "center",
              color: "#98a7b9",
              fontSize: "13px",
            }}
          >
            将您的电子邮件放在下面的字段中。我们将向您发送一个链接，其中包含一个需要遵循的说明。
          </div>
        </Form.Item>
        <Form.Item<FieldType>
          label={
            <label style={{ color: "#fff", fontWeight: 600 }}>Email</label>
          }
          name="email"
          rules={[{ required: true, message: "Please input your email!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" block loading={Loading}>
            <label style={{ fontWeight: "bold" }}>重置密码</label>
          </Button>
        </Form.Item>
      </Form>
      <div className="forgetPass"></div>
      <div className="more"></div>
    </>
  );
}

export default ForgetPass;
